<template>
  <view>
    <view class="container" :style="{ backgroundImage: `url(${getImageUrl('v-bg.png')})` }">
      <u-navbar
        title="发布视频"
        backIconColor="#fff"
        title-size="36"
        :is-back="true"
        :background="background"
        :border-bottom="false"
        title-color="#fff"
      ></u-navbar>

      <view class="video-title dis-flex flex-x-center">
        <u-image class="tl-icon" src="@/static/spbt.png" width="32rpx" height="32rpx"></u-image>
        <input placeholder-style="color: #fff;" placeholder="视频标题" style="color: white" />
      </view>
      <view class="top dis-flex flex-y-between">
        <view class="video-des">
          <textarea
            v-model="form.title"
            class="text-area"
            name=""
            placeholder="请输入描述(5-48个字)"
            id=""
            cols="30"
            rows="10"
          ></textarea>
        </view>
        <view class="video-cover">
          <u-upload
            itemBgColor="#353535"
            max-count="1"
            ref="uUpload"
            width="220rpx"
            height="312rpx"
            upload-text=""
            :action="action"
            :file-list="cover"
          ></u-upload>
          <view class="cover-des"> 点击编辑视频封面 </view>
        </view>
      </view>

      <view class="rule">
        <text> (建议上传文件不超过100M）</text>
      </view>
      <!-- <u-line color="#2D2D2D"></u-line> -->
      <!-- 			<view class="view-bar">
				<view class="view-item1" @click="recordVideo">
					<text class="need">*</text>
					<p v-if="form.playUrl">已选中视频</p>
					<p v-else>上传视频<text style="font-size: 24rpx;color:#F54831"> (建议上传文件不超过100M）</text></p>
					<u-icon style="margin-left: 10rpx;" name="/static/img/more.png" size="15"></u-icon>
				</view>
			</view>	 -->

      <view class="view-bar">
        <view class="view-item1 dis-flex flex-x-center flex-y-between" @click="onPicker('region')">
          <view class="dis-flex flex-x-center">
            <u-image class="icon" src="@/static/wddw.png" width="32rpx" height="32rpx"></u-image>
            <p>我的位置</p>
          </view>
          <view class="dis-flex flex-x-center">
            <text v-if="region">{{ region.city.label + region.area.label }}</text>
            <text class="r-text" v-else>选择位置</text>
            <u-image class="r-icon" src="@/static/right.png" width="16rpx" height="28rpx"></u-image>
          </view>
        </view>
      </view>
      <!-- <u-line color="#2D2D2D"></u-line> -->
      <view class="view-bar">
        <view class="view-item1 dis-flex flex-x-center flex-y-between">
          <view class="dis-flex flex-x-center">
            <u-image class="icon" src="@/static/spdh.png" width="32rpx" height="32rpx"></u-image>
            <p>视频带货</p>
          </view>
          <view class="dis-flex flex-x-center">
            <u-switch v-model="checked" active-color="#10A28F" inactive-color="#eee"></u-switch>
          </view>
        </view>
      </view>
      <!-- <u-line color="#2D2D2D"></u-line> -->
      <view class="view-bar">
        <view class="view-item1 dis-flex flex-x-center flex-y-between" @click="bindGoods">
          <view class="dis-flex flex-x-center">
            <u-image class="icon" src="@/static/glsp.png" width="32rpx" height="32rpx"></u-image>
            <p>关联商品</p>
          </view>
          <view class="dis-flex flex-x-center">
            <text v-if="rangeValue">{{ rangeValue.label }}</text>
            <text class="r-text" v-else>关联商品</text>
            <u-image class="r-icon" src="@/static/right.png" width="16rpx" height="28rpx"></u-image>
          </view>
        </view>
      </view>
      <!-- <u-line color="#2D2D2D"></u-line> -->
      <view v-show="false" class="">
        <video class="video" src=""></video>
        <canvas class="canvas"></canvas>
      </view>
      <view class="fixed-wapper">
        <view class="floor-tip">
          <view @click="checked = !checked">
            <u-icon
              :name="checked ? '/static/selected.png' : '/static/unselect.png'"
              size="35"
              style="margin-right: 10rpx; margin-top: 12rpx"
            ></u-icon>
          </view>
          <text>我已阅读并同意</text>
          <text style="color: #10a28f" @click="routeTo('')">《视频发布协议》</text>
        </view>
        <view @click="submit" class="submit-btn btn"> 立即发布 </view>
      </view>
    </view>

    <view v-if="goodsInfo" class="view-bar">
      <view
        class="goods-list-box"
        v-for="(item, index) in itemList[0]"
        :key="index"
        @click="routeTo()"
      >
        <view class="gods-img-box">
          <!-- <image class="goods-img" src="../../static/gui.png" mode=""></image> -->
        </view>
        <view class="goods-dsce">
          <view class="goods-title-tip">
            <text>商品名称商品名称</text>
          </view>
          <view class="goods-price-info">
            <text class="price_main">¥12.00</text>
            <button>选择关联</button>
          </view>
        </view>
      </view>
    </view>
    <u-picker
      :mode="mode"
      v-model="show"
      :range="range"
      @confirm="confirmSelctor"
      range-key="label"
    ></u-picker>
  </view>
</template>

<script>
import { uploadFiles } from '@/common/upload.js'
import { BASE_URL, UP_URL } from '@/common/config'

export default {
  data() {
    return {
      background: {
        background: '#000000'
      },
      mode: 'selector',
      show: false,
      checked: false,
      rangeValue: '',
      region: '',
      cover: [],
      action: BASE_URL + UP_URL,
      fileList: [],
      videoSrc: '',
      range: [],
      itemList: [],
      form: {
        playUrl: '',
        coverUrl: 'xzx',
        title: '',
        privacy: false,
        latitude: '',
        longitude: '',
        cityId: '',
        spuId: ''
      },
      goodsInfo: '',
      cover: []
    }
  },
  onLoad(options) {
    if (options.tempImagePath) {
      this.cover.push({
        url: options.tempImagePath
      })
      this.uploadFile(options.tempImagePath, 2)
    }
    if (options.tempVideoPath) {
      this.tempVideoPath = options.tempVideoPath
      this.uploadFile(this.tempVideoPath)
    }
  },
  methods: {
    confirmSelctor(e) {
      if (this.mode == 'selector') {
        //this.rangeValue = this.range[e]
        if (e == 0) {
          this.recordVideo('')
        } else {
          this.recordVideo()
        }
      } else {
        this.region = e
        this.form.cityId = e.city.value
      }
    },
    onPicker(e) {
      this.mode = e
      this.show = true
    },
    routeTo(url) {
      uni.navigateTo({
        url
      })
    },
    uploadFile(path, type = 1) {
      uni.showLoading({
        title: '上传中...'
      })
      uploadFiles(path)
        .then((res2) => {
          if ((type = 1)) this.form.playUrl = res2.data
          else this.form.coverUrl = res2.data
          // this.getVideoBase64(res2.data)
        })
        .finally(() => {
          uni.hideLoading()
        })
    },
    recordVideo() {
      uni.chooseVideo({
        //, 'camera'
        //maxDuration: 120,
        sourceType: ['album'], // 指定使用摄像头录像
        camera: 'back', // 指定使用后置摄像头，可选值有front、back
        // 最大录制时长（秒）
        success: (res) => {
          // 获取视频录制文件的临时路径
          console.log('录制的视频文件路径:', res.tempFilePath)
          uni.showLoading({
            title: '上传中...'
          })
          uploadFiles(res.tempFilePath)
            .then((res2) => {
              this.form.playUrl = res2.data
              this.getVideoBase64(res2.data)
            })
            .finally(() => {
              uni.hideLoading()
            })
          // 可以在这里处理视频文件，例如上传到服务器
        },
        fail: (err) => {
          uni.showModal({
            title: '未选择视频'
          })
        }
      })
    },
    submit() {
      this.$refs.uUpload.lists.forEach((val) => {
        if (val.response.data) {
          this.form.coverUrl = val.response.data
        }
      })

      if (this.form.playUrl == '') {
        this.$u.toast('请选择视频')
        return
      }

      if (this.form.coverUrl == '') {
        this.$u.toast('请选择封面')
        return
      }
      // if(this.form.detailAddress == ""){
      // 	this.$u.toast("请输入详细地址")
      // 	return
      // }

      // if(this.area == ""){
      // 	this.$u.toast("选择选择经营地址")
      // 	return
      // }
      this.form.spuId = this.goodsInfo.id
      this.$u.post('/app-api/vlog/info/create', this.form).then((res) => {
        this.$u.toast('成功')
        setTimeout(() => {
          try {
            uni.navigateBack()
          } catch (e) {
            // #ifdef MP-WEIXIN
            uni.switchTab({
              url: '/pages/video-home/video-home'
            })
            // #endif
          }
        }, 800)
      })
    },
    bindGoods() {
      uni.$on('goodsInfo', (cb) => {
        this.goodsInfo = cb
        console.log('goodsInfo', this.goodsInfo)
        uni.$off('goodsInfo')
      })
      uni.navigateTo({
        url: '/other_center/video-bind-goods/video-bind-goods'
      })
    },
    onSee() {
      uni.navigateTo({
        url:
          '/other/video-play/video-play?videoList=' +
          JSON.stringify([this.form.playUrl]) +
          '&play=' +
          JSON.stringify(this.form.playUrl)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
@import url('@/style/btn.css');

.container {
  height: 100vh;
  position: relative;
  background-position: center;
  background-size: cover;
}

page {
  background-color: #f2f2f2;
  font-size: 30rpx;
}

.top {
  /* background-color: #fff; */
  margin-bottom: 20rpx;
  align-items: center;

  // padding: 20rpx;
  .video-des {
    width: 480rpx;
    height: 312rpx;
    background: #353535;
    border-radius: 10rpx;
    // opacity: 0.1;
    padding: 20rpx;

    .text-area {
      width: 100%;
      height: 100%;
      color: white;
    }
  }

  .video-cover {
    width: 220rpx;
    height: 312rpx;
    position: relative;
    margin-bottom: 14rpx;

    // background-color: #000000;
    .cover-des {
      position: absolute;
      bottom: 0;
      font-weight: 400;
      font-size: 24rpx;
      color: #ffffff;
      left: 13rpx;
    }
  }
}

.rule {
  font-size: 24rpx;
  color: #999999;
  padding: 20rpx 0;
}

.video-title {
  margin-bottom: 20rpx;
  font-size: 30rpx;
  color: #ffffff;

  .tl-icon {
    margin-right: 20rpx;
    margin-top: 6rpx;
  }
}

.need {
  color: red;
}

input {
  flex: 8;
}

.view-bar {
  margin-top: 20rpx;
  border-bottom: 1rpx solid #2d2d2d;
  // padding: 30rpx 20rpx;
  .view-item1 {
    display: flex;
    align-items: center;
    padding: 20rpx;
    font-size: 30rpx;
    color: #ffffff;

    .icon {
      margin-right: 20rpx;
      margin-top: 6rpx;
    }

    .r-text {
      font-size: 30rpx;
      color: #999999;
    }

    .r-icon {
      margin-left: 15rpx;
      margin-top: 2rpx;
    }
  }
}

.floor {
  padding: 20rpx;
  background-color: #fff;
}

.container {
  padding: 20rpx;
  background-color: #000000;
  height: 100vh;
}

.floor-tip {
  display: flex;
  align-items: center;
  padding: 20rpx;
  color: #ffffff;
}
.goods-list-box {
  display: flex;
  height: 200rpx;
  background-color: #ffffff;
  padding: 20rpx;
  margin-bottom: 12rpx;
  border-bottom: 2rpx solid #ededed;
}

.goods-img-box {
  flex: 3;
  width: 230rpx;
  padding: 30rpx;
}

.goods-img {
  width: 160rpx;
  height: 160rpx;
}

.goods-dsce {
  flex: 7;
  display: flex;
  flex-direction: column;
  margin-left: 20rpx;
}

.goods-title-tip {
  flex: 7;
}

.goods-price-info {
  display: flex;
  margin-top: 50rpx;
}

.price_main {
  flex: 1;
  font-size: 26rpx;
  color: #ff3636;
}

.goods-price-info button {
  font-size: 24rpx;
  height: 50rpx;
  line-height: 50rpx;
  border-radius: 30rpx;
  /* background-color: #0F76BC; */
  background: #10a28f;
  color: #ffffff;
}
</style>
